<template>
    <!-- 表格组件 -->
    <el-table :data="tableData">
        <el-table-column  label="日期">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <el-icon>
                        <timer />
                    </el-icon>
                    <span style="margin-left: 10px">{{ scope.row.nav_create_time }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column width="200" label="描述" prop="nav_text" />
        <el-table-column >
            <template #header>操作</template>
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="small" @click="handleDelete(scope.$index, scope.row)" type="danger">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script lang="ts" setup>
// 导入消息提示框
import { ElMessage } from 'element-plus';
import { reactive } from 'vue';
import { navListApi, navRemoveApi } from '../../http/request';
import moment from "moment";
// 导入创建路由方法
import { useRouter } from 'vue-router';
// 定义路由
const $router = useRouter();
// 用户临时身份token
let token = localStorage.getItem('token');
// 定义数据结构
interface Navi {
    nav_create_time: string
    nav_text: string
    nav_id: string
}
// 记录数据
let tableData: Navi[] = reactive([]);
// 交互行为1
const handleEdit = (index: number, row: Navi) => {
    // console.log('edit',index, row)
    $router.push({path:'/navigate/add',query:{nav_id: row.nav_id}})
}
// 交互行为2
const handleDelete = (index: number, row: Navi) => {
    // 获取导航id
    let nav_id = row.nav_id;
    // 删除导航
   if(confirm('您确定删除该导航吗?')){
    navRemoveApi({ token, nav_id})
        .then(
            (data: any) => {
                if (data.code == 200) {
                    tableData.splice(index, 1)
                }
                // 提示
                ElMessage({
                    message: data.msg,
                    type: 'warning',
                });
            }
        )
   }
}
// 初始化导航列表
const initnavList = async () => {
    // 调用导航列表接口
    await navListApi()
        .then(
            (data: any) => {
                if (data.code == 200) {
                    // console.log(data);
                    let { result } = data;
                    result.map((item: any) => {
                        if (item.nav_create_time) {
                            item.nav_create_time = moment(new Date(item.nav_create_time)).format('YYYY-MM-DD hh:mm:ss')
                        }
                        tableData.push(item)
                    });
                }
            }
        )
}
// 初始化 
initnavList();


</script>